
import { Input } from '@/components/ui/input';
import MenuToggle from '../components/MenuToggle';
import { CardContent, CardHeader, Card, CardTitle } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { SelectItem, Select, SelectContent, SelectValue, SelectTrigger } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Eye, Palette, Type, RotateCcw, Layout, Save, Download, Settings } from 'lucide-react';
import { Slider } from '@/components/ui/slider';
import React, { useState } from 'react';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
const ThemeConfig = ({ toggleSidebar }) => {
  // 主题配置状态
  const [themeConfig, setThemeConfig] = useState({
    // 颜色配置
    colors: {
      primary: '#2563eb',
      secondary: '#64748b',
      accent: '#f59e0b',
      background: '#ffffff',
      surface: '#f8fafc',
      text: '#1e293b',
      textSecondary: '#64748b',
      border: '#e2e8f0',
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
      info: '#3b82f6'
    },
    // 字体配置
    typography: {
      fontFamily: 'system',
      fontSize: 'medium',
      fontWeight: 'normal',
      lineHeight: 'normal',
      letterSpacing: 'normal'
    },
    // 布局配置
    layout: {
      borderRadius: 'medium',
      spacing: 'medium',
      shadow: 'medium',
      animation: 'medium'
    },
    // 组件配置
    components: {
      buttonStyle: 'rounded',
      inputStyle: 'outlined',
      cardStyle: 'elevated',
      navigationStyle: 'sidebar'
    },
    // 高级配置
    advanced: {
      darkMode: false,
      compactMode: false,
      highContrast: false,
      reducedMotion: false,
      customCSS: ''
    }
  });

  const fontFamilies = [
    { value: 'system', label: '系统默认' },
    { value: 'sans-serif', label: 'Sans Serif' },
    { value: 'serif', label: 'Serif' },
    { value: 'monospace', label: 'Monospace' }
  ];

  const fontSizes = [
    { value: 'small', label: '小 (14px)' },
    { value: 'medium', label: '中 (16px)' },
    { value: 'large', label: '大 (18px)' },
    { value: 'xlarge', label: '特大 (20px)' }
  ];

  const borderRadiusOptions = [
    { value: 'none', label: '无圆角' },
    { value: 'small', label: '小圆角' },
    { value: 'medium', label: '中圆角' },
    { value: 'large', label: '大圆角' },
    { value: 'full', label: '完全圆角' }
  ];

  const handleColorChange = (colorKey, value) => {
    setThemeConfig(prev => ({
      ...prev,
      colors: {
        ...prev.colors,
        [colorKey]: value
      }
    }));
  };

  const handleTypographyChange = (key, value) => {
    setThemeConfig(prev => ({
      ...prev,
      typography: {
        ...prev.typography,
        [key]: value
      }
    }));
  };

  const handleLayoutChange = (key, value) => {
    setThemeConfig(prev => ({
      ...prev,
      layout: {
        ...prev.layout,
        [key]: value
      }
    }));
  };

  const handleComponentChange = (key, value) => {
    setThemeConfig(prev => ({
      ...prev,
      components: {
        ...prev.components,
        [key]: value
      }
    }));
  };

  const handleAdvancedChange = (key, value) => {
    setThemeConfig(prev => ({
      ...prev,
      advanced: {
        ...prev.advanced,
        [key]: value
      }
    }));
  };

  const handleSave = () => {
    // 这里应该调用API保存主题配置
    console.log('保存主题配置:', themeConfig);
    alert('主题配置已保存');
  };

  const handleReset = () => {
    if (confirm('确定要重置所有配置到默认值吗？')) {
      setThemeConfig({
        colors: {
          primary: '#2563eb',
          secondary: '#64748b',
          accent: '#f59e0b',
          background: '#ffffff',
          surface: '#f8fafc',
          text: '#1e293b',
          textSecondary: '#64748b',
          border: '#e2e8f0',
          success: '#10b981',
          warning: '#f59e0b',
          error: '#ef4444',
          info: '#3b82f6'
        },
        typography: {
          fontFamily: 'system',
          fontSize: 'medium',
          fontWeight: 'normal',
          lineHeight: 'normal',
          letterSpacing: 'normal'
        },
        layout: {
          borderRadius: 'medium',
          spacing: 'medium',
          shadow: 'medium',
          animation: 'medium'
        },
        components: {
          buttonStyle: 'rounded',
          inputStyle: 'outlined',
          cardStyle: 'elevated',
          navigationStyle: 'sidebar'
        },
        advanced: {
          darkMode: false,
          compactMode: false,
          highContrast: false,
          reducedMotion: false,
          customCSS: ''
        }
      });
    }
  };

  const handleExport = () => {
    const dataStr = JSON.stringify(themeConfig, null, 2);
    const dataBlob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(dataBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'theme-config.json';
    link.click();
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                  <Settings className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    主题配置
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    自定义系统主题样式和布局
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Button variant="outline" onClick={handleExport}>
                <Download className="w-4 h-4 mr-2" />
                导出配置
              </Button>
              <Button variant="outline" onClick={handleReset}>
                <RotateCcw className="w-4 h-4 mr-2" />
                重置
              </Button>
              <Button onClick={handleSave} className="bg-primary hover:bg-primary-600">
                <Save className="w-4 h-4 mr-2" />
                保存配置
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* 左侧：配置面板 */}
          <div className="lg:col-span-2">
            <Tabs defaultValue="colors" className="w-full">
              <TabsList className="grid w-full grid-cols-5">
                <TabsTrigger value="colors">颜色</TabsTrigger>
                <TabsTrigger value="typography">字体</TabsTrigger>
                <TabsTrigger value="layout">布局</TabsTrigger>
                <TabsTrigger value="components">组件</TabsTrigger>
                <TabsTrigger value="advanced">高级</TabsTrigger>
              </TabsList>

              {/* 颜色配置 */}
              <TabsContent value="colors" className="mt-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <Palette className="w-5 h-5" />
                      <span>颜色配置</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {Object.entries(themeConfig.colors).map(([key, value]) => (
                        <div key={key}>
                          <Label htmlFor={key} className="capitalize">
                            {key === 'primary' && '主色调'}
                            {key === 'secondary' && '辅助色'}
                            {key === 'accent' && '强调色'}
                            {key === 'background' && '背景色'}
                            {key === 'surface' && '表面色'}
                            {key === 'text' && '文字色'}
                            {key === 'textSecondary' && '次要文字'}
                            {key === 'border' && '边框色'}
                            {key === 'success' && '成功色'}
                            {key === 'warning' && '警告色'}
                            {key === 'error' && '错误色'}
                            {key === 'info' && '信息色'}
                          </Label>
                          <div className="flex items-center space-x-2 mt-1">
                            <Input
                              id={key}
                              type="color"
                              value={value}
                              onChange={(e) => handleColorChange(key, e.target.value)}
                              className="w-12 h-10 p-1 border rounded"
                            />
                            <Input
                              value={value}
                              onChange={(e) => handleColorChange(key, e.target.value)}
                              placeholder="#000000"
                              className="flex-1"
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

              {/* 字体配置 */}
              <TabsContent value="typography" className="mt-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <Type className="w-5 h-5" />
                      <span>字体配置</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="fontFamily">字体族</Label>
                        <Select 
                          value={themeConfig.typography.fontFamily} 
                          onValueChange={(value) => handleTypographyChange('fontFamily', value)}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            {fontFamilies.map(font => (
                              <SelectItem key={font.value} value={font.value}>
                                {font.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

                      <div>
                        <Label htmlFor="fontSize">字体大小</Label>
                        <Select 
                          value={themeConfig.typography.fontSize} 
                          onValueChange={(value) => handleTypographyChange('fontSize', value)}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            {fontSizes.map(size => (
                              <SelectItem key={size.value} value={size.value}>
                                {size.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    <div className="space-y-4">
                      <div>
                        <Label>字体粗细</Label>
                        <Select 
                          value={themeConfig.typography.fontWeight} 
                          onValueChange={(value) => handleTypographyChange('fontWeight', value)}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="light">细体</SelectItem>
                            <SelectItem value="normal">正常</SelectItem>
                            <SelectItem value="medium">中等</SelectItem>
                            <SelectItem value="semibold">半粗体</SelectItem>
                            <SelectItem value="bold">粗体</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

                      <div>
                        <Label>行高</Label>
                        <Select 
                          value={themeConfig.typography.lineHeight} 
                          onValueChange={(value) => handleTypographyChange('lineHeight', value)}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="tight">紧密</SelectItem>
                            <SelectItem value="normal">正常</SelectItem>
                            <SelectItem value="relaxed">宽松</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

              {/* 布局配置 */}
              <TabsContent value="layout" className="mt-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center space-x-2">
                      <Layout className="w-5 h-5" />
                      <span>布局配置</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div>
                      <Label>圆角大小</Label>
                      <Select 
                        value={themeConfig.layout.borderRadius} 
                        onValueChange={(value) => handleLayoutChange('borderRadius', value)}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {borderRadiusOptions.map(option => (
                            <SelectItem key={option.value} value={option.value}>
                              {option.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label>间距大小</Label>
                      <Select 
                        value={themeConfig.layout.spacing} 
                        onValueChange={(value) => handleLayoutChange('spacing', value)}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="compact">紧凑</SelectItem>
                          <SelectItem value="medium">中等</SelectItem>
                          <SelectItem value="comfortable">舒适</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label>阴影效果</Label>
                      <Select 
                        value={themeConfig.layout.shadow} 
                        onValueChange={(value) => handleLayoutChange('shadow', value)}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none">无阴影</SelectItem>
                          <SelectItem value="small">轻微</SelectItem>
                          <SelectItem value="medium">中等</SelectItem>
                          <SelectItem value="large">明显</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label>动画速度</Label>
                      <Select 
                        value={themeConfig.layout.animation} 
                        onValueChange={(value) => handleLayoutChange('animation', value)}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none">无动画</SelectItem>
                          <SelectItem value="fast">快速</SelectItem>
                          <SelectItem value="medium">中等</SelectItem>
                          <SelectItem value="slow">缓慢</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

              {/* 组件配置 */}
              <TabsContent value="components" className="mt-6">
                <Card>
                  <CardHeader>
                    <CardTitle>组件样式</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div>
                      <Label>按钮样式</Label>
                      <Select 
                        value={themeConfig.components.buttonStyle} 
                        onValueChange={(value) => handleComponentChange('buttonStyle', value)}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="rounded">圆角</SelectItem>
                          <SelectItem value="square">方形</SelectItem>
                          <SelectItem value="pill">胶囊</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label>输入框样式</Label>
                      <Select 
                        value={themeConfig.components.inputStyle} 
                        onValueChange={(value) => handleComponentChange('inputStyle', value)}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="outlined">边框</SelectItem>
                          <SelectItem value="filled">填充</SelectItem>
                          <SelectItem value="underlined">下划线</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label>卡片样式</Label>
                      <Select 
                        value={themeConfig.components.cardStyle} 
                        onValueChange={(value) => handleComponentChange('cardStyle', value)}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="flat">平面</SelectItem>
                          <SelectItem value="elevated">浮起</SelectItem>
                          <SelectItem value="outlined">边框</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

              {/* 高级配置 */}
              <TabsContent value="advanced" className="mt-6">
                <Card>
                  <CardHeader>
                    <CardTitle>高级设置</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <Label htmlFor="darkMode">深色模式</Label>
                          <p className="text-sm text-material-grey-600">启用深色主题</p>
                        </div>
                        <Switch
                          id="darkMode"
                          checked={themeConfig.advanced.darkMode}
                          onCheckedChange={(checked) => handleAdvancedChange('darkMode', checked)}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <div>
                          <Label htmlFor="compactMode">紧凑模式</Label>
                          <p className="text-sm text-material-grey-600">减少界面间距</p>
                        </div>
                        <Switch
                          id="compactMode"
                          checked={themeConfig.advanced.compactMode}
                          onCheckedChange={(checked) => handleAdvancedChange('compactMode', checked)}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <div>
                          <Label htmlFor="highContrast">高对比度</Label>
                          <p className="text-sm text-material-grey-600">提高颜色对比度</p>
                        </div>
                        <Switch
                          id="highContrast"
                          checked={themeConfig.advanced.highContrast}
                          onCheckedChange={(checked) => handleAdvancedChange('highContrast', checked)}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <div>
                          <Label htmlFor="reducedMotion">减少动画</Label>
                          <p className="text-sm text-material-grey-600">减少界面动画效果</p>
                        </div>
                        <Switch
                          id="reducedMotion"
                          checked={themeConfig.advanced.reducedMotion}
                          onCheckedChange={(checked) => handleAdvancedChange('reducedMotion', checked)}
                        />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>

          {/* 右侧：预览面板 */}
          <div className="lg:col-span-1">
            <Card className="sticky top-6">
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Eye className="w-5 h-5" />
                  <span>实时预览</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {/* 颜色预览 */}
                  <div>
                    <h4 className="text-sm font-medium mb-2">颜色方案</h4>
                    <div className="grid grid-cols-4 gap-2">
                      {Object.entries(themeConfig.colors).slice(0, 8).map(([key, value]) => (
                        <div key={key} className="text-center">
                          <div 
                            className="w-8 h-8 rounded border border-material-grey-300 mx-auto mb-1"
                            style={{ backgroundColor: value }}
                          ></div>
                          <span className="text-xs text-material-grey-600 capitalize">{key}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* 组件预览 */}
                  <div>
                    <h4 className="text-sm font-medium mb-2">组件预览</h4>
                    <div className="space-y-3">
                      <Button 
                        size="sm" 
                        className="w-full"
                        style={{ backgroundColor: themeConfig.colors.primary }}
                      >
                        示例按钮
                      </Button>
                      <Input 
                        placeholder="示例输入框" 
                        size="sm"
                        style={{ borderColor: themeConfig.colors.border }}
                      />
                      <div 
                        className="p-3 rounded border"
                        style={{ 
                          backgroundColor: themeConfig.colors.surface,
                          borderColor: themeConfig.colors.border 
                        }}
                      >
                        <p className="text-sm" style={{ color: themeConfig.colors.text }}>
                          示例卡片内容
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* 字体预览 */}
                  <div>
                    <h4 className="text-sm font-medium mb-2">字体预览</h4>
                    <div className="space-y-2">
                      <p className="text-lg font-semibold">标题文字</p>
                      <p className="text-sm">正文内容示例</p>
                      <p className="text-xs text-material-grey-600">辅助说明文字</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </>
  );
};

export default ThemeConfig;
